// 主体颜色
@primary-color: #43b3bf;
// 背景颜色
@primary-color-bg: #ceebee;

body {
  --primary-color: @primary-color;
  --primary-color-bg: @primary-color-bg;
}

.themeBack {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
}

.theme {
  width: auto;
  position: absolute;
  right: 2em;
  top: 25px;

  .themeImg {
    cursor: pointer;

    img {
      width: 1.2em;
      height: 1.2em;
      transform: translateX(-100vw);
      filter: drop-shadow(var(--primary-color) 100vw 0);
    }
  }

  .themeImg:hover {
    transform: scale(1.1);
  }

  .themeImg:active {
    transform: scale(0.9);
  }

  .themeBody {
    position: absolute;
    z-index: 13;
    right: -10px;
    top: 2em;
    box-shadow: 0px 0px 5px rgba(115, 119, 122, 0.3);
    padding: 5px;
    border-radius: 3px;
    background-color: #fff;
    isplay: flex;
    width: 125px;
    flex-direction: column;

    .themeItemOk {
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      background-color: rgba(237, 238, 240, 1);
      padding: 3px 10px;
      border-radius: 3px;
      align-items: center;
      cursor: pointer;
    }

    .themeItem {
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #666666;
      display: flex;
      justify-content: space-between;
      padding: 3px 10px;
      border-radius: 3px;
      align-items: center;
      cursor: pointer;
    }

    .themeItem:hover {
      background-color: rgba(237, 238, 240, 1);
    }

    .themeItemName {
      display: flex;
      gap: 5px;
      align-items: center;

      .themeItemCheck {
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
      }
    }

    img {
      width: 1.2em;
      height: 1.2em;
    }
  }
}
